import React, { Component } from 'react';
import { Button, Tooltip } from 'antd';
import { connect } from 'dva';
import TimerEnhance from '@/utils/TimerEnhance';
import List from './components/List';
import AddOne from './components/AddOne';
import styles from './index.less';

@connect(({ jixiexinxi_nongjizulin, loading }) => ({
  jixiexinxi_nongjizulin,
  loading,
}))
@TimerEnhance
class Index extends Component {
  handleLoadList = () => {
    this.props.dispatch({
      type: 'jixiexinxi_nongjizulin/getNongjizulinListEffect',
    });
  };

  // 退出页面重置数据
  handleResetData = () => {
    this.props.dispatch({
      type: 'jixiexinxi_nongjizulin/resetDataReducer',
    });
  };


  componentDidMount() {
    this.handleLoadList();
  }

  componentWillUnmount() {
    this.handleResetData();
  }

  handlePressAddOne = () => {
    this.addOne.open();
  };

  handleDelete = (info) => {
    // {id: 1, machineDesc: "收割机", contact: "13451189097", price: 1357.88, time: "2019/03/22"}
    this.props.dispatch({
      type: 'jixiexinxi_nongjizulin/deleteOneRecordEffect',
      payload: {
        data: {
          id: info.id,
        },
      },
    });
  };

  // 新增一条记录
  handleAddOne = (info) => {
    // {machineDesc: "神牛1号", price: 11110000, contact: "13451185326"}
    this.props.dispatch({
      type: 'jixiexinxi_nongjizulin/addOneRecordEffect',
      payload: {
        data: {
          machineDesc: info.machineDesc,
          contact: info.contact,
          price: info.price,
        },
      },
    });
  };

  render() {
    const that = this;
    const {
      jixiexinxi_nongjizulin: {
        list,
      },
      loading,
    } = this.props;

    const addOneProps = {
      handleSubmit: this.handleAddOne,
    };

    const listProps = {
      data: list,
      loading: loading.effects['jixiexinxi_nongjizulin/getNongjizulinListEffect'],
      handleDelete: that.handleDelete,
    };

    return (
      <div className={styles.container}>
        <AddOne
          {...addOneProps}
          wrappedComponentRef={(form) => this.addOne = form}
        />
        <List {...listProps} />
        <div className={styles.addOneWrapper}>
          <Tooltip placement="top" title="发布租赁信息">
            <Button type="primary" shape="circle" icon="plus" size="large" onClick={this.handlePressAddOne} />
          </Tooltip>
        </div>
      </div>
    );
  }
}

export default Index;
